import React, { Component } from 'react'
import '../../styles/Issue/fillInformation_demand.scss'

import { DatePickerView} from 'antd-mobile';


export default class fillInformation_demand extends Component {
  constructor(props){
    super(props)
    this.state = {
      // value:'',
      timeselection:false,
      information:{
        place:'',
        price:'',
        ask:'',
        checkintime:'',
        sex:'',
        phone:'',
        expect:'',
      },
    }
  }
  // onChange = (value) => {
  //   this.setState({ value :this.value});
  // };
  onValueChange = (...args) => {
    const arg = args[0]
    console.log(arg);
    const time = arg[0]+'年'+(Number(arg[1])+1)+'月'+arg[2]+'日'+arg[3]+'时'+arg[4]+'分'
    const obj = {...this.state.information}
    obj.checkintime = time
    console.log(time);
    this.setState({
      information: obj
    })
  };
  showdata=()=>{
    this.setState({
      timeselection:true, 
    })
  }
  
  cancel = ()=>{
    this.setState({
      timeselection:false, 
    })
    
  }
  confirm = ()=>{
    this.setState({
      timeselection:false, 
    })
  }
  handleClick=()=>{
    console.log(this.state.information);
  }
  backgo=()=>{
    document.querySelector('footer').style.display='flex'   //底部路由导航恢复
    this.props.history.goBack();
  }

  render() {
    return (
      <div className='fill-demand'>
        <div className="demand-header">
          <h2>填写信息</h2>
          <span className='iconfont' onClick={this.backgo}>&#xe601;</span>
        </div>
        <div className="demand-content">
          <div className="Soliciting-title">
            <h3>求租标题</h3>
            <input type="text" placeholder='请输入'/>
          </div>
          <div className="inquiry">
            <h3>求租信息</h3>
            <div className="place">
              <span>位置</span>
              <input type="text"  placeholder='请请填写期望的房源位置' ></input>
            </div>
            <div className="price">
              <span>预算价格</span>
              <input type="text" placeholder='请输入'/>
            </div>
            <div className="ask">
              <span>户型要求</span>
              <input type="text" placeholder='几几厅几卫入'/>
            </div>
            <div className="check-in-time">
              <span>入住时间</span>
              <input type="text" placeholder='选择你要入住的时间' onClick={this.showdata}  defaultValue={this.state.information.checkintime} />
            </div>
            <div className="sex">
              <span>性别要求</span>
              <input type="text" placeholder='男/女'/>
            </div>
            <div className="phone">
              <span>联系电话</span>
              <input type="text" placeholder='请输入'/>
            </div>
            <div className="expect">
              <span>房子期望</span>
              <input type="text" placeholder='请输入'/>
            </div>
            <button onClick={this.handleClick}>发布房源</button> 
          </div>
        </div>

        
        <div className={this.state.timeselection ? 'hideform showDate':'hideform'} >
          <div className="options">
            <p onClick={this.cancel}>取消</p>
            <p onClick={this.confirm}>确定</p>
          </div>
          <DatePickerView  value={this.state.value} onChange={this.onChange} onValueChange={this.onValueChange}/>
        </div>
      </div>
    )
  }
}
